<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time|dataFormat}}</span>
            <span>点击：{{photoinfo.click}}</span>
        </p>
        <hr>
        <!--    图片略所图区域    -->
        <div class="Thumbs">
            <vue-preview :slides="slide1"></vue-preview>
        </div>
        <!--    图片内容区域    -->
        <div class="content" v-html="photoinfo.content">

        </div>
        <!--    评论子组件（放置一个现成的）-->
        <cmt :id="id"></cmt>
    </div>

</template>
<script>
    //引用弹框
    import {Toast} from 'mint-ui'
    //引入评论子组件
    import comment from '../../subcomponents/comment.vue'

    export default {
        data() {
            return {
                id: this.$route.params.id,//从路由中获取到的图片 id
                photoinfo: {},//存放图文详情的对象
                slide1: [],//缩略图的数组
            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbs();
        },
        methods: {
            getPhotoInfo() {//获取图片详情的函数
                this.axios.get('api/getimageInfo/' + this.id).then(result => {
                    // console.log(result.data);
                    this.photoinfo = result.data.message[0];
                }).catch(result => {
                    //图文详情获取失败
                    Toast('图文详情获取失败了！！！');
                });
            },
            getThumbs() {
                //获取缩略图
                this.axios.get('api/getthumimages/' + this.id).then(result => {
                    console.log(result.data);
                    //循环每个图片数据，补全图片的宽和高
                    result.data.message.forEach(item => {
                        item.w = 600;//设置以大图浏览时的宽度
                        item.h = 400;//设置以大图浏览时候的高度
                        item.src = item.src;//大图
                        item.msrc = item.src//小图
                    });
                    //把数据保存到slide1中
                    this.slide1 = result.data.message;
                }).catch(result => {
                    //略缩图获取失败
                    Toast('略缩图获取失败！！！');
                })
            }
        },
        components: {//注册评论子组件
            'cmt': comment
        }
    }
</script>
<style lang="scss" >
    /*这里是全局样式才可以*/
    .photoinfo-container {
        padding: 3px;

        h3 {
            color: #26A2FF;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }

        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .content {
            font-size: 13px;
            line-height: 30px;
        }

        .Thumbs {
            /deep/ .my-gallery{
                display: flex;
                justify-content: flex-start;
                align-content: center;
                flex-wrap: wrap;
            }
            figure{
                width: 30%;
                margin: 10px;
                display: inline-block;
                img{
                    width: 100%;
                }
            }
        }
    }
</style>